<template>
  <div class="app-container">
    <div style="padding: 20px;">
      <el-row>
        <el-col :span="4">
          <strong style="font-size: 20px;">
            新增/修改
          </strong>
        </el-col>
      </el-row>

      <div style="padding:20px">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="真实姓名">
            <el-input v-model="form.outAcntNm" :disabled="true" />
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="form.licNo" :disabled="true" />
          </el-form-item>
          <el-form-item label="注册银行卡号">
            <el-input v-model="form.outAcntNo" :disabled="true" />
          </el-form-item>
          <el-form-item label="提现银行卡号">
            <el-input v-model="form.defaultOutAcntNo" />
          </el-form-item>
          <el-form-item label="预留手机">
            <el-input v-model="form.mobile" :disabled="true" />
          </el-form-item>
          <el-form-item label="绑定账号" prop="user">
            <el-select
              v-model="form.user"
              filterable
              remote
              clearable
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
              @change="$forceUpdate()"
            >
              <el-option
                v-for="item in users"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="自动提现">
            <el-switch
              v-model="form.autoWithdraw"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="form.status"
            >
              <el-option
                label="已申请"
                :value="0"
              />
              <el-option
                label="注册中"
                :value="1"
              />
              <el-option
                label="正常"
                :value="2"
              />
              <el-option
                label="禁止提现"
                :value="-1"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: Number(this.$route.params.id),
      form: {
        outAcntNo: '',
        mobile: '',
        interBankNo: '910290000028',
        issInsName: '（CIPS专用）中国农业银行股份有限公司',
        outAcntNm: '',
        defaultOutAcntNo: '',
        licNo: '',
        user: null
      },
      disabled: false,
      loading: false,
      users: []
    }
  },
  created() {
    if (this.id) {
      this.disabled = true
      this.axios.get(`/manage/fuiou-accounts/${this.id}`).then((res) => {
        this.form.user = res.data.user.id
        this.form.outAcntNo = res.data.outAcntNo
        this.form.mobile = res.data.mobile
        this.form.outAcntNm = res.data.outAcntNm
        this.form.licNo = res.data.licNo
        this.form.defaultOutAcntNo = res.data.defaultOutAcntNo
        this.form.status = res.data.status
        this.axios.get(`/manage/users/${res.data.user.id}`).then((res) => {
          this.users.push(res.data)
        })
      })
    }
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        this.axios.get(`/manage/users`, { params: {
          '@display': `{
              'id': 'entity.getId()',
              'username': 'entity.getUsername()'
          }`,
          '@filter': `entity.getEnabled() == true && entity.getUsername() matches "${query}"`
        }}).then((res) => {
          const list = []
          for (var i of res.data) {
            if (i.username === 'admin' || i.username === 'platform') {
              continue
            }
            list.push(i)
          }
          this.users = list
        }).finally(() => {
          this.loading = false
        })
      } else {
        this.users = []
      }
    },
    onSubmit() {
      if (!this.form.outAcntNm) {
        this.$message.error('请填写真实姓名！')
        return
      }
      if (!this.form.licNo) {
        this.$message.error('请填写身份证号！')
        return
      }
      if (!this.form.outAcntNo) {
        this.$message.error('请填写银行卡号！')
        return
      }
      if (!this.form.mobile) {
        this.$message.error('请填写预留手机！')
        return
      }
      if (!this.form.user) {
        this.$message.error('请选择绑定账号！')
        return
      }

      if (this.id) {
        const loading = this.$loading({
          lock: true,
          text: '数据交互中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.axios.put(`/manage/fuiou-accounts/${this.id}`, this.form)
          .then((account) => {
            this.axios.post(`/manage/fuiou-accounts/${account.data.id}/register`).then((res) => {
              loading.close()
              if (res.data.respCode === '0000') {
                this.$message.success('请查收预留手机号码短信，通过短信方式进行认证')
              } else {
                this.$message.error(res.data.respDesc)
              }
              this.$router.go(-1)
            })
          })
      } else {
        const loading = this.$loading({
          lock: true,
          text: '数据交互中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.axios.post(`/manage/fuiou-accounts`, this.form)
          .then((account) => {
            this.axios.post(`/manage/fuiou-accounts/${account.data.id}/register`).then((res) => {
              loading.close()
              if (res.data.respCode === '0000') {
                this.$message.success('请查收预留手机号码短信，通过短信方式进行认证')
              } else {
                this.$message.error(res.data.respDesc)
              }
              this.$router.go(-1)
            })
          })
      }
    }
  }
}
</script>
